<template>
	<view class="wrap" :style="'background-image: url('+topBg+')'">
		<view class="main">
			<view class="user-info">
				<view class="b-avatar">
					<image :src="userInfo.avatar_url || '/static/imgs/user.png'"></image>
				</view>
				<view class="b-info">
					<text class="s-name" v-if="isLogin">{{ userInfo.nickname || '--' }}</text>
					<text class="s-phone" v-if="isLogin">{{ userInfo.mobile || '--' }}</text>
					<text class="s-login" v-else @click="onRedirect('user-login', true)">立即登录</text>
				</view>
				<view class="b-logout" v-if="isLogin">
					<view class="iconfont icon-logout" @click="onLogout()"></view>
					<view class="s-blank"></view>
				</view>
			</view>
			<view class="card-box" v-if="isLogin">
				<template v-if="userInfo.fund_state == 2">
					<view class="b-main">
						<view class="iconfont icon-fund-card"></view>
						<view class="s-cont">储值卡被屏蔽</view>
					</view>
				</template>
				<template v-else>
					<view class="b-info">
						<view class="b-card">
							<view class="s-name">储值卡</view>
							<view class="s-number">{{userInfo.fund_number || '--'}}</view>
						</view>
						<view class="b-more" @click="onRedirect('mine-fund')">
							<view class="iconfont icon-more"></view>
						</view>
					</view>
					<view class="b-main">
						<view class="b-balance" @click="onRedirect('mine-fund')">
							<view class="s-tit">余额:</view>
							<view class="s-amount">{{userInfo.fund_amount_left}}</view>
						</view>
						<view class="b-action" @click="onRedirect('mine-fund')">
							<view class="s-btn">立即充值</view>
						</view>
					</view>
				</template>
			</view>
			<view class="history-section icon">
				<list-cell icon="icon-user-order" title="我的订单" :tips="(userInfo.count_order || 0)+''"
					@eventClick="onRedirect('order-list')">
				</list-cell>
				<list-cell icon="icon-like-yes" title="我的收藏" :tips="(userInfo.count_like || 0)+''"
					@eventClick="onRedirect('mine-like')">
				</list-cell>
				<list-cell icon="icon-user-info" title="个人资料" @eventClick="onRedirect('user-info')">
				</list-cell>
				<list-cell icon="icon-user-question" title="常见问题" @eventClick="onRedirect('question-list')">
				</list-cell>
				<list-cell icon="icon-user-service" title="联系客服" type="contact"></list-cell>
				<list-cell icon="icon-user-about" title="关于" @eventClick="onRedirect('setting')">
				</list-cell>
			</view>
			<!-- <view class="btn-logout" @click="onLogout" v-if="isLogin">切换账户</view> -->
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		logout
	} from '@/service/api/user.js'
	import mixinsAuth from '@/mixins/auth.js'
	import mixinsCommon from '@/mixins/common.js'
	export default {
		mixins: [mixinsCommon, mixinsAuth],
		data() {
			return {
				userInfo: {}
			}
		},
		onLoad() {
			if (this.isLogin) {
				getUserInfo().then(([err, res]) => {
					console.log('getUserInfo', err, res)
					if (!err) {
						this.userInfo = res
					}
				})
			}
		},
		computed: {
			topBg() {
				return this.$store.getters.globalConfig.style_mine_bg || ''
			}
		},
		methods: {
			onLogout() {
				uni.showModal({
					content: '确定要切换账户么',
				}).then(([err, res]) => {
					if (!err) {
						if (res.confirm) {
							logout().then(([err, res]) => {
								console.log('logout', err, res)
								this.$store.commit('delAccessToken');
								uni.reLaunch({
									url: '/pages/user/login'
								})
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: env(safe-area-inset-bottom);
		background-color: $pq-bg-color;
	}

	.wrap {
		// background-image: url(/static/imgs/top-bg.png);
		background-repeat: no-repeat;
		background-size: contain;
	}

	.main {
		padding: 20upx;
	}

	.user-info {
		margin-top: 200upx;
		height: 180upx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;

		.b-avatar {
			image {
				width: 130upx;
				height: 130upx;
				border: 5upx solid #fff;
				border-radius: 50%;
			}
		}

		.b-info {
			margin-left: 20upx;
			display: flex;
			flex-direction: column;

			.s-name {
				color: #4C3012;
				font-size: 40upx;
				font-weight: bold;
			}

			.s-phone {
				margin-top: 20upx;
				font-size: 32upx;
				color: #4C3012;
			}

			.s-login {
				margin-left: 20upx;
				font-size: 40upx;
				color: #fff;
			}
		}

		.b-logout {
			margin-left: 20upx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.iconfont {
				font-size: 40upx;
				width: 40upx;
				height: 40upx;
			}

			.s-blank {
				height: 60upx;
			}
		}
	}

	.card-box {
		margin-top: 50upx;
		padding: 30upx;
		background: #2E2E2D;
		border-radius: 20upx;
		display: flex;
		// align-items: center;
		flex-direction: column;
		justify-content: space-between;

		.b-info {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.b-card {
				.s-name {
					font-size: 32upx;
					color: #fff;
				}

				.s-number {
					margin-top: 10upx;
					font-size: 26upx;
					color: #B3B3B3;
				}
			}

			.b-more {
				.iconfont {
					color: #FAFAFA;
				}
			}
		}

		.b-main {
			margin-top: 50upx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.b-balance {
				display: flex;
				align-items: center;

				.s-tit {
					margin-right: 20upx;
					font-size: 26upx;
					color: #FAFAFA;
				}

				.s-amount {
					font-size: 32upx;
					color: #FAFAFA;
				}
			}

			.b-action {
				.s-btn {
					padding: 0 30upx;
					background: #373737;
					height: 60upx;
					line-height: 60upx;
					border-radius: 30upx;
					font-size: 24upx;
					color: #FAFAFA;
				}
			}
		}
	}

	.history-section {
		margin-top: 50upx;
		background: #fff;
		border-radius: 10upx;
	}

	.btn-logout {
		margin-top: 60upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: #DA5650;
		background: #ffffff;
		font-size: 32upx;
		border: 1px solid #DA5650;
		border-radius: 40upx;
		letter-spacing: 10upx;
	}
</style>